<h2>Your cart</h2>
<div ng-controller="cartSummaryCtrl">
    <div class="alert alert-warning" ng-show="cartData.length==0">
        There are no products in your shopping cart.
        <a href="#/products" class="alert-link">Click here to return to the catalogue</a>
    </div>
    <div ng-hide="cartData.length==0">
        <table class="table">
            <thead>
            <tr>
                <th>Item</th>
                <th>Price</th>
                <th class="text-center">Quantity</th>
                <th class="text-right">Subtotal</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in cartData">
                <td class="text-left">{{item.name}}</td>
                    <td class="text-left">{{item.price}}</td>
                <td class="text-center">{{item.count}}</td>
                <td class="text-right">{{(item.price*item.count)|currency}}</td>
                <td>
                    <button ng-click="remove(item.id)" class="btn btn-sm btn-warning">Remove</button>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="3" class="text-right">Total:</td>
                <td class="text-right">
                    {{total() | currency}}
                </td>
            </tr>
            </tfoot>
        </table>
        <div class="text-center">
            <a class="btn btn-primary" href="#/products">Continue shopping</a>
            <a class="btn btn-primary" href="#/placeorder">Place order now</a>
        </div>
    </div>
</div>